<template>
  <div class="common-preview-modal-component">
    <a-modal
      :open="open"
      :footer="null"
      @cancel="updateOpen(false)"
      width="800px"
      class="file-preview-modal"
    >
      <div v-if="file" class="preview-content">
        <!-- 图片预览 -->
        <img
          v-if="isImageFile(file)"
          :src="file.url"
          :alt="file.originalName"
          class="preview-image"
        />
        <!-- PDF预览 -->
        <iframe
          v-else-if="isPdfFile(file)"
          :src="file.url"
          class="preview-pdf"
        ></iframe>
        <!-- 视频预览 -->
        <video
          v-else-if="isVideoFile(file)"
          :src="file.url"
          controls
          class="preview-video"
        ></video>
        <!-- 音频预览 -->
        <audio
          v-else-if="isAudioFile(file)"
          :src="file.url"
          controls
          class="preview-audio"
        ></audio>
        <!-- 其他文件预览 -->
        <div v-else class="preview-other">
          <FileOutlined class="file-icon" />
          <div class="file-name">{{ file.originalName }}</div>
          <div class="file-meta">
            <span>{{ file.extension ? file.extension.toUpperCase() : '' }}</span>
            <span>{{ formatFileSize(file.size) }}</span>
          </div>
          <a-button type="primary" @click="handleDownload(file)">
            {{ t('file.download') }}
          </a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import type { File as FileData } from '@/types/api/file'

defineOptions({
  name: 'PreviewModal'
})

 withDefaults(defineProps<{
  open: boolean
  file: FileData | null
  isImageFile: (file: FileData) => boolean
  isPdfFile: (file: FileData) => boolean
  isVideoFile: (file: FileData) => boolean
  isAudioFile: (file: FileData) => boolean
  formatFileSize: (size: number) => string
}>(), {
  open: false,
  file: null
})

// Emits定义
const emit = defineEmits<{
  (e: 'update:open', value: boolean): void
  (e: 'download', file: FileData): void
}>()

// 国际化
const { t } = useI18n()

// 更新open状态
const updateOpen = (value: boolean) => {
  emit('update:open', value)
}

// 处理下载
const handleDownload = (file: FileData) => {
  emit('download', file)
}
</script>

<style lang="scss" scoped>
.common-preview-modal-component {
  .file-preview-modal {
    .preview-content {
      display: flex;
      justify-content: center;
      align-items: center;
      
      .preview-image {
        max-width: 100%;
        max-height: 500px;
      }
      
      .preview-pdf {
        width: 100%;
        height: 500px;
        border: none;
      }
      
      .preview-video,
      .preview-audio {
        width: 100%;
        max-height: 500px;
      }
      
      .preview-other {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: $spacing-lg;
        
        .file-icon {
          font-size: 48px;
          color: #8c8c8c;
          margin-bottom: $spacing-md;
        }
        
        .file-name {
          font-size: $font-size-lg;
          font-weight: 500;
          margin-bottom: $spacing-sm;
          text-align: center;
          word-break: break-all;
        }
        
        .file-meta {
          display: flex;
          gap: $spacing-md;
          color: $text-color-secondary;
          margin-bottom: $spacing-lg;
        }
      }
    }
  }
}
</style> 